import React, { Component } from 'react';
import { Input, Select, Button, Table, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';




const { Search } = Input;
const options = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '一年级',
        label: '一年级',
    },
    {
        value: '二年级',
        label: '二年级',
    },
    {
        value: '三年级',
        label: '三年级',
    },
    {
        value: '四年级',
        label: '四年级',
    },
    {
        value: '五年级',
        label: '五年级',
    },
    {
        value: '六年级',
        label: '六年级',
    },

];
const options1 = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '1班',
        label: '1班',
    },
    {
        value: '2班',
        label: '2班',
    },
    {
        value: '3班',
        label: '3班',
    },
    {
        value: '4班',
        label: '4班',
    },
    {
        value: '5班',
        label: '5班',
    },
    {
        value: '6班',
        label: '6班',
    },

];
interface DataType {
    key: string;
    name: string;


}
const columns: ColumnsType<DataType> = [
    {
        title: '班级名称',
        dataIndex: 'name',
        key: 'name',

    },
    {
        title: '操作',
        key: 'action',
        render: () => (
            <Space size="middle">
                <a>编辑 </a>
                <a>删除</a>
            </Space>
        ),
    },
];
const data: DataType[] = [
    {
        key: '1',
        name: '一年级(2)班',

    },
    {
        key: '1',
        name: '一年级(2)班',

    }, {
        key: '1',
        name: '一年级(2)班',

    }, {
        key: '1',
        name: '一年级(2)班',

    },




];
class classManagement extends Component {
    render() {
        return (
            <div>
                <div className='header'>
                    <h1 style={{ backgroundColor: "#dedede", height: '50px', lineHeight: '50px', color: 'blue', fontSize: '18px', textIndent: '1em' }}>班级管理</h1>
                </div>
                <div>
                    <Select defaultValue="职务" options={options} style={{ width: '150px', margin: '0px 20px' }} />
                    <Select defaultValue="部门" options={options1} style={{ width: '150px' }} />
                    <Button type="primary" style={{ margin: '0px 20px ' }}>查询</Button>
                    <Button>重置</Button>
                    <Button type="primary" style={{ marginLeft: '100px' }}>新增班级</Button>
                </div>
                <div style={{ border: '1px solid #bae7ff', backgroundColor: '#e6f7ff', height: '50px', lineHeight: '50px', borderRadius: '5px', marginTop: '20px', textIndent: '2em' }}>
                    查询结果：共计{'num'}条数据
                </div>
                <div>

                    <Table columns={columns} dataSource={data} bordered={true} />

                </div>
            </div>
        );
    }
}

export default classManagement;